<template>
	<view class="page">
		<view class="content">
			<view class="item">
				<view class="left" @click="select">
					<view class="checkbox" :class="{ active: isSelected }"></view>
					<u--image :showLoading="true" src="/static/logo.png" width="200rpx" height="200rpx"></u--image>
				</view>
				<view class="right">
					<view class="top">
						<u--text text="绿色乘用车升级套件" bold></u--text>
						<u--text text="免费升级、十万公里质保" size=12></u--text>
						<u--text text="共2套" size=12></u--text>
					</view>
					<view class="bottom">
						<u--text text="￥" color="#F21E46"></u--text>
						<u--text text="888" color="#F21E46" size=30 lineHeight="1em"></u--text>
						<u-number-box v-model="num" @change="numChange" button-size="26"></u-number-box>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>
<script>
export default {
	data() {
		return {
			isSelected: false,
			num: 1
		}
	},
	methods: {
		select() {
			this.isSelected = !this.isSelected
		},
		numChange(e) {
			console.log(e.value)
		}
	}
}



</script>
<style lang="scss" scoped>
.content {
	padding: 40rpx 30rpx;
}

.item {
	background-color: white;
	border-radius: 10px;
	display: flex;
	padding: 30rpx 16rpx;

	.left {
		display: flex;
		align-items: center;

		.checkbox {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
			border-radius: 50%;
			border: 1px solid #D8D8D8;

			&.active {
				background-color: #0256FF;
				border-color: #0256FF;
			}
		}
	}

	.right {
		width: 400rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		.bottom {
			display: flex;
			margin-top: auto;

			::v-deep .u-text__value {
				white-space: nowrap !important;
				align-self: flex-end;
			}

			::v-deep .u-text {
				flex: 0;
			}

			::v-deep .u-number-box {
				margin-left: auto;
			}
		}
	}
}
</style>
